<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="在职员工" name="first">
        <el-container>
          <el-drawer
            title="搜索"
            :visible.sync="showtree"
            direction="ltr"
            :with-header="false"
            size="80%"
          >
            <work-user-tree
              :department="department"
              @handleCheckChange="handleCheckChange"
            ></work-user-tree>
          </el-drawer>
          <!-- <el-aside width="260px" > -->
          <!-- 组织树-->
          <!-- <work-user-tree
            :department="department"
            @handleCheckChange="handleCheckChange"
          ></work-user-tree> -->
          <!-- </el-aside> -->

          <el-header class="tabletitle">
            <span>在职人员信息</span>
            <el-button-group style="margin-left: 15px">
              <el-button
                type="primary"
                icon="el-icon-s-fold"
                @click="showtree = true"
              ></el-button>
              <el-button
                @click="$refs.WorkUserDrawer.drawersearch = true"
                type="success"
                icon="el-icon-search"
              >
              </el-button>
            </el-button-group>
          </el-header>

          <!-- 人员信息表-->
          <work-user-table
            :tableData="tableData"
            :currentPage="currentPage"
            :totalCount="totalCount"
            :PageSize="PageSize"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
          >
          </work-user-table>
        </el-container>
      </el-tab-pane>

      <el-tab-pane label="可转正员工" name="secend">
        <employ-user-index></employ-user-index>
      </el-tab-pane>
    </el-tabs>

    <!-- 人员信息卡-->
    <work-user-info-card
      :selectdepartment="selectdepartment"
    ></work-user-info-card>

    <!-- 抽屉 -->

    <work-user-drawer
      ref="WorkUserDrawer"
      :form="form"
      :selectdepartment="selectdepartment"
      @usersearch="usersearch"
      @onclean="onclean"
      :tableData="tableData"
    >
    </work-user-drawer>
  </div>
</template>

<style>
.tabletitle {
  max-height: 30px;
  font-size: 25px;
  color: #409eff;
}
.el-aside {
  color: #333;
  background-color: rgb(255, 255, 255);
}
</style>

<script>
import arrayToTree from "array-to-tree";
import WorkUserTable from "./WorkUserTable.vue";
import WorkUserTree from "./WorkUserTree.vue";
import WorkUserInfoCard from "./WorkUserInfoCard.vue";
import WorkUserDrawer from "./WorkUserDrawer.vue";
import InterviewUserIndex from "../InterviewUser/InterviewUserIndex.vue";
import ReserveUserIndex from "../ReserveUser/ReserveUserIndex.vue";
import InductionUserIndex from "../InductionUser/InductionUserIndex.vue";
import EmployUserIndex from "../EmployUser/EmployUserIndex.vue";
import FormationIndex from "../Formation/FormationIndex.vue";

export default {
  components: {
    WorkUserTable,
    WorkUserTree,
    WorkUserInfoCard,
    WorkUserDrawer,
    InterviewUserIndex,
    ReserveUserIndex,
    InductionUserIndex,
    EmployUserIndex,
    FormationIndex,
  },
  data() {
    return {
      //导出页面所需数据
      tablename: [], //全部字段名称
      activeName: "first",

      showtree: false,

      // 搜索表单数据
      form: { name: "", sdate: "", edate: "", sex: "" },

      // table所需数据
      tableData: [], // 总数据
      currentPage: 1, // 默认显示第几页
      totalCount: 1, // 总条数，根据接口获取数据长度(不能为空)
      PageSize: 7, //每页展示条数

      //组织树所需数据
      department: [],
      selectdepartment: [],

      syndatareport: [],
    };
  },

  created() {
    // 获得部门信息
    this.getDepartment();
  },

  methods: {
    //  同步数据
    async synuserdata() {
      this.$confirm("是否同步本地与钉钉通讯录人员信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "玩命同步中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          this.$axios
            .post("api/member/synuserinfo")
            .then((response) => {
              this.syndatareport = response.data;
              loading.close();
              if (this.syndatareport && this.syndatareport.length > 0) {
                this.$refs.WorkUserSynReport.reportshow = true;
              } else {
                this.$message({
                  type: "success",
                  message: "经比对钉钉与本地系统数据一致，无需同步",
                });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    // 打开导出抽屉，同时给子组件的checkbox赋值
    openexport() {
      if (this.tableData && this.tableData.length > 0) {
        this.$refs.WorkUserDrawer.tableTitle = this.tablename;
        this.$refs.WorkUserDrawer.tableRange = this.tablename;
        this.$refs.WorkUserDrawer.drawerexport = true;
      } else {
        this.$message.error("你看看表里有数据吗？你让我导出啥？");
      }
    },
    // 获得全部数据字段名称
    async getallkey() {
      this.tableid = Object.keys(this.tableData[0]);
      let datas = {
        keyname: this.tableid,
      };
      this.$axios
        .post("api/getkeymapname", datas)
        .then((response) => {
          this.tablename = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 清空搜索条件
    onclean() {
      this.form = {};
    },
    // 查找用户
    async usersearch() {
      let datas = {
        name: this.form.name,
        sdate: this.form.sdate,
        edate: this.form.edate,
      };
      console.log(datas);
      this.$axios
        .post("api/member/usersearch", datas)
        .then((response) => {
          this.tableData = response.data;
          this.totalCount = this.tableData.length;
          this.currentPage = 1;

          this.$notify({
            title: "获取成功",
            message: "获取用户信息成功",
            type: "success",
            duration: 1500,
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 树形组织点击触发
    handleCheckChange(selectobjp) {
      let selectobj = selectobjp;
      //  提取部门id
      let selecarr = [];
      selectobj.forEach((item) => {
        selecarr.push(item.id);
      });
      this.getUserList(selecarr);
    },

    // 打开页面时加载部门信息
    async getDepartment() {
      try {
        let res = await this.$axios.get(`api/member/getdepartment`);

        this.department = arrayToTree(res.data, {
          parentProperty: "pid",
          customID: "id",
        });
        this.selectdepartment = res.data;
      } catch (e) {}
    },

    //获得人员信息
    async getUserList(selecarr) {
      let datas = {
        selecarr: selecarr,
        roleid: sessionStorage.getItem("roleid"),
      };
      this.$axios
        .post("api/member/getalluser", datas)
        .then((response) => {
          this.tableData = response.data;
          this.totalCount = this.tableData.length;
          this.currentPage = 1;
          if (response.data.length > 0) {
            this.getallkey();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    openformation() {
      this.$refs.formation.formationshow = true;
    },

    // 页码跳转
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    handleSizeChange(val) {
      this.PageSize = val;
    },
  },
};
</script>
